<template>
  <div class="hello">
    <home-head :city="city"></home-head>
    <swipers :swiper="swipersList"></swipers>
    <nav-icon :iconList="iconList"></nav-icon>
    <recommend :recommendList="recommendList"></recommend>
    <weekend :weekendList="weekendList"></weekend>
  </div>
</template>

<script>
import HomeHead from "./home/HomeHead";
import swipers from "./home/swiper";
import NavIcon from "./home/NavIcon";
import recommend from "./home/recommend";
import weekend from "./home/weekend";
import { IndexList } from "../api/http";
export default {
  name: "home",
  data() {
    return {
      city: "",
      iconList: [],
      swipersList: [],
      recommendList: [],
      weekendList:[]
    };
  },
  mounted() {
    IndexList()
      .then(res => {
        console.log(res);
        if (res.data.ret) {
          // console.log(res.data.data)
          this.city = res.data.data.city;
          this.swipersList = res.data.data.swiperList;
          this.iconList = res.data.data.iconList;
          this.recommendList = res.data.data.recommendList;
          this.weekendList = res.data.data.weekendList;
          // console.log( this.swipersList)
        }
      })
      .catch(err => {
        console.log(err);
      });
  },
  components: {
    HomeHead,
    swipers,
    NavIcon,
    recommend,
    weekend
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
